<template>
  <div id="yqxz">
    <div class="tit">
      <h2>园区现状</h2>
      <div class="empty-box"></div>
      <p>一诺万金、关注用户需求、解决用户痛点，打造智慧园区运营服务新模式</p>
    </div>
    <div class="con">
      <!-- left -->
      <div class="item-left-box">
        <div
          class="item-left"
          v-for="item in leftMessage"
          :key="item.mainTit"
        >
          <h2>{{ item.mainTit }}</h2>
          <p>{{ item.content }}</p>
        </div>
      </div>
      <!-- img -->
      <div class="img-box">
        <img src="https://www.1nuoyun.com/uploadfile/2021/09/24/20210924183658yl8mr1.png" alt="">
      </div>
      <!-- right -->
      <div class="item-right-box">
        <div
          class="item-right"
          v-for="item in rightMessage"
          :key="item.mainTit"
        >
          <h2>{{ item.mainTit }}</h2>
          <p>{{ item.content }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Yqxz",
    data() {
      return {
        leftMessage: [
          {
            mainTit: "管理粗放",
            content: "运营管理粗放，效率低、安全隐患多，服务水平与质量基本停留在传统物业管理的层次"
          },
          {
            mainTit: "扩展性差",
            content: "缺乏统一的技术标准和管理标准，集成度较低、扩展性较差，“生态”想象空间小，无法实现价值最大化"
          }
        ],
        rightMessage: [
          {
            mainTit: "信息孤岛",
            content: "信息化程度相对较低，设备种类繁多，各个厂家互不联通、信息孤岛问题普遍，不能整合导致“智慧”决策的价值大打折扣"
          },
          {
            mainTit: "运营成本高",
            content: "单一的依靠园区空间租金收入，园区运营团队的管理成本均居高不下，无法实现经济效益最大化"
          }
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>

  @import "assets/scss/public";

  #yqxz {
    width: 62.5%;
    margin: 4rem auto;
    .tit {
      .empty-box {
        background: linear-gradient(90deg, #2f6bee, #009fff);
      }
    }
    .con {
      padding: 12rem 4rem;
      box-shadow: 0 0 1rem #f5f5f5;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item-left-box,
      .item-right-box {
        width: 30%;
        margin-bottom: -6rem;
        .item-left,
        .item-right {
          margin-bottom: 6rem;
          h2 {
            font-size: 2.4rem;
            font-weight: 1000;
            color: #1890ff;
            margin-bottom: 1.6rem;
          }
          p {
            font-size: 1.6rem;
            color: #666;
            text-align: justify;
          }
        }
      }
      .img-box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        img {
          width: 40rem;
        }
      }
    }
    .con:hover {
      transition-duration: 0.3s;
      transform: translateY(-0.5rem);
    }
  }
</style>